<template>
  <div class="flex_lzy" style="width: 100%;">
    <div class="main_box">
      <div class="content_box">
        <div style="font-size: 16px;color: #242E3D;margin-bottom:16px">绑定手机号</div>
        <div class="inputBox">
          <el-input v-model="formData.phone" placeholder="输入手机号">
            <template slot="prepend">
              <!-- <span class="icon iconfont">&#xe62f;</span> -->
              <img style="width: 20px;height: 20px;" src="../../../static/download/1.png" alt="">
            </template>
          </el-input>
        </div>
        <div class="inputBox inputBox_code">
          <el-input style="width: 172px;" v-model="formData.verificationCode" placeholder="输入验证码" @keyup.enter.native="login">
            <template slot="prepend">
              <!-- <span class="icon iconfont">&#xe62e;</span> -->
              <img style="width: 20px;height: 20px;" src="../../../static/download/2.png" alt="">

            </template>
          </el-input>
          <div>
            <span v-show="codeShow" class="codeBtn" @click="getCode">获取验证码</span>
            <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span>
          </div>

        </div>
        <div style="font-size: 16px;color: #242E3D;margin-bottom:16px">姓名</div>
        <div class="inputBox">
          <el-input v-model="formData.name" placeholder="输入姓名">
            <template slot="prepend">
              <!-- <span class="icon iconfont">&#xe62f;</span> -->
              <img style="width: 20px;height: 20px;" src="../../../static/download/3.png" alt="">

            </template>
          </el-input>
        </div>
        <div style="font-size: 16px;color: #242E3D;margin-bottom:16px">单位</div>
        <div class="inputBox">
          <el-input v-model="formData.unitName" placeholder="输入单位名称">
            <template slot="prepend">
              <!-- <span class="icon iconfont">&#xe62f;</span> -->
              <img style="width: 20px;height: 20px;" src="../../../static/download/4.png" alt="">

            </template>
          </el-input>
        </div>
        <div style="margin:26px 0;text-align:center">
          <el-link type="primary" @click="skip">跳过此步骤</el-link>
        </div>
        <div class="loginBtn_box" style="">
          <el-button class="loginBtn" @click="loginPass" :loading="loadingLoginPass">保存个人信息</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTheCode, verifyCodeAPI, editCardAPI } from '@/api/login.js'

export default {
  components: {},
  data() {
    return {
      codeCountNum: '',
      loadingLoginPass: false,
      codeShow: true,
      formData: {
        name: '',
        unitName: '',
        verificationCode: '',
        phone: ''
      }
    }
  },
  computed: {},
  created() {},
  methods: {
    skip() {
      this.$emit('emitImproveInfo', false)
    },
    async editCard() {
      try {
        const res = await editCardAPI({
          ...this.formData,
          id: this.$store.state.userInfo.cardId
        })
        // console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success',
            customClass: 'messageZindex'
          })
          this.loadingLoginPass = false
          this.$emit('emitImproveInfo', false)
          // this.codeShow = false
        }
      } catch (error) {
        this.loadingLoginPass = false
      }
    },
    async verifyCode() {
      this.loadingLoginPass = true
      const res = await verifyCodeAPI({
        phone: this.formData.phone,
        verificationCode: this.formData.verificationCode
      })
      if (res.data.code == 200) {
        this.editCard()
      } else {
        this.$message({
          message: '验证码有误',
          type: 'error',
          customClass: 'messageZindex'
        })
        this.loadingLoginPass = false
      }
    },
    loginPass() {
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '手机号码格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.formData.verificationCode === '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      this.verifyCode()
    },
    async getCode() {
      const TIME_COUNT = 120
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '手机号格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      const response = await getTheCode({ phone: this.formData.phone })
      const res = response.data
      if (res.code === '200') {
        if (!this.timer) {
          this.codeCountNum = TIME_COUNT
          this.codeShow = false
          this.timer = setInterval(() => {
            if (this.codeCountNum > 0 && this.codeCountNum <= TIME_COUNT) {
              this.codeCountNum--
            } else {
              this.codeShow = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          customClass: 'messageZindex'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex_lzy {
  display: flex;
  justify-content: center;
}
.main_box {
  width: 298px;
}
.inputBox {
  margin-bottom: 16px;
}
.inputBox_code {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.codeBtn {
  width: 112px;
  height: 38px;
  border-radius: 4px;
  opacity: 1;
  background: #ff932e;
  // background: #c5aa7b;
  display: block;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0em;
  color: #fff;
}
.codeCount {
  color: #fff;
}

.loginBtn_box {
  text-align: center;
}
.loginBtn {
  width: 296px;
  height: 38px;
  border-radius: 4px;
  background: #1c72f3;
  box-sizing: border-box;
  color: #ffffff;
  &:hover {
    // border: 1px solid $mainGlod;
    background: #166cee;
  }
}
.inputBox >>> .el-input-group__prepend {
  border: none;
  background: #f5f6f9;
}
.inputBox >>> .el-input__inner {
  border: none;
  background: #f5f6f9;
  padding: 0;
}
.main_box >>> .el-link--inner {
  color: #166cee;
}
</style>
